<template>
	<view>
		<!-- 加载动画 -->
		<!-- <orange-fullloading text="加载中" :loadshow="loadingStatus"></orange-fullloading> -->
		<view class="header-index fixed-top">
			<image src="/static/img/header-bg.png" class="header-img" mode=""></image>
			<view class="header-nav">
				<view :style="{ paddingTop: statusBarheight + 'px' }"></view>
				<view class="w-716 row-ac nav-shop-info">
					<!-- #ifndef MP-WEIXIN -->
					<view class="shop-name text-white font-s-6 font-w mr">粉姑娘</view>
					<view class="flex-1 nav-shop-search mx-1 row-ac text-white">
						<view class="iconfont icon-sousuo ml-3"></view>
						<view class="font-s-2 ml-1">搜索</view>
					</view>
					<view class="iconfont icon-fenlei1 text-white"></view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="row-ac" :style="{ width: appPussWidth + '%' }">
						<view class="flex-1 nav-shop-search row-ac text-white">
							<view class="iconfont icon-sousuo ml-3"></view>
							<view class="font-s-2 ml-1">搜索</view>
						</view>
						<view class="iconfont icon-fenlei1 text-white"></view>
					</view>
					<view class="" :style="{ width: watchButtonWidth + '%' }"></view>
					<!-- #endif -->
					
				</view>
			</view>
			<view class="w-716 mt-1" v-if="categoryHeaderlist.length > 0">
				<view class=" flex-1 header-scroll">
					<scroll-view scroll-x class="scroll-row" :scroll-into-view="scrollInto">
						<view class="scroll-row-item mr-3" v-for="(item, index) in categoryHeaderlist" v-if="item.id != 30" :key="index" :class="{ active: categoryIndex == index }" :id="'tab' + index" @click="clickCategory(index)">
							<view class="font-s-5 text-white py-1 category-name">{{ item.cname }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<template v-if="categoryIndex == 0">
			<view class="w-750" style="margin-top: 238rpx;">
				<view class="w-750 bg-color" style="height: 85rpx;border-radius: 0 0 30rpx 30rpx;"></view>
				<view class="w-716" style="margin-top: -85rpx;">
					<common-swiper :banner="swiperBanner" :swiperheight="302"></common-swiper>
				</view>
			</view>
			<view class="w-716 row-ac py-1 shop-service">
				<view class=" text-main-color font-w font-s-6">Cosmetics</view>
				<view class="row-ac ml-3 font-s-2">
					<view class="row-ac mr-2">
						<view class="iconfont icon-zhengpin"></view>
						<view class="ml">正品保证</view>
					</view>
					<view class="row-ac mr-2">
						<view class="iconfont icon-pinpaibiaozhibarand"></view>
						<view class="ml">品牌直购</view>
					</view>
					<view class="row-ac mr-2">
						<view class="iconfont icon-servicehaiwaizhiyou" style="font-size: 32rpx;"></view>
						<view class="ml">海外直邮</view>
					</view>
				</view>
			</view>
			<!-- 分类导航 -->
			<view class="indexCategory-box row-ac-sb py-2" v-if="indexCategory.length > 0">
				<view class="category-item row-a-j-fc" v-for="(item, index) in indexCategory" :key="index" v-if="index <= 4" @click="toProductList(item.id)">
					<image :src="item.icon || nopictures" class="category-img" mode=""></image>
					<view class="category-text font-s-1 mt-1">{{ item.name }}</view>
				</view>
			</view>
			<!-- 图片广告 -->
			<view class="w-750 my-1" style="height: 180rpx;">
				<image src="/static/img/11221056.png" mode=""></image>
			</view>
			<!-- 限时补贴 -->
			<view class="w-716 bg-white rounded seckill-box" v-if="newGoodslist.length > 0">
				<view class="py-2 px-2 row-ac-sb seckill-title">
					<image src="/static/img/seckill-index.png" style="width: 186rpx;height: 33rpx;" mode=""></image>
					<view class="text-light-grey font-s-2">更多<text class="ml-2 iconfont icon-xiangxia"></text></view>
				</view>
				<view class="px-2 row-ac">
					<view class="font-s-3 text-main-color">18:00场结束</view>
					<uni-countdown :hour="1" :minute="12" :second="56" />
				</view>
				<view class="py-2 px-2">
					<scroll-view scroll-x class="scroll-row">
						<view class="scroll-row-item" style="width: 226rpx;" v-for="(item,index) in newGoodslist" :key="index" @tap="toProduct(item.id)">
							<view class="w-100 d-f flex-column align-center">
								<image :src="item.slide_list.img" style="width: 148rpx;height: 148rpx;" mode=""></image>
								<view class="text-de text-light-grey font-s-1 mt-2">原价:￥688</view>
								<view class="seckill-price-box mt-2 row-ac" style="">
									<view class="seckill-price row font-s-1 text-white">￥{{ item.price }}</view>
									<view class="seckill-butie row font-s-1">补贴价</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="w-716 bg-white rounded mt-2 row-ac">
				<view class="w-50" style="">
					<view class="px-2 pt-2 font-s-5">新人必购</view>
					<view class="px-2  mt-1 font-s-2 text-success">惊喜价</view>
					<view class="flex-1 row-ac mt-2 pb-2">
						<view class="w-50" v-for="(item,index) in newGoodslist" :key="index" v-if="index < 2" @tap="toProduct(item.id)">
							<image :src="item.slide_list.img" style="width:75%;" mode="widthFix" />
						</view>
					</view>
				</view>
				<view class="w-50" style="">
					<view class="px-2 pt-2 font-s-5">新人必购</view>
					<view class="px-2  mt-1 font-s-2 text-danger">惊喜价</view>
					<view class="flex-1 row-ac mt-2 pb-2">
						<view class="w-50 row" v-for="(item,index) in newGoodslist" :key="index" v-if="index < 2" @tap="toProduct(item.id)">
							<image :src="item.slide_list.img" style="width:75%;" mode="widthFix" />
						</view>
					</view>
				</view>
			</view>
			<view class="w-716 row-ac py-4  navigation">
				<view class="row-a-j-fc" style="width: 25%;height: 80rpx;" v-for="(item,index) in navigationList" :key="index"  :class="{ active: navigationIndex == index }" @tap="tapNavigation(index)">
					<view class="w-100 row font-s-5 navigation-name">{{ item.name }}</view>
					<view class="font-s-2 text-light-grey pb-1 navigation-title">{{ item.title }}</view>
				</view>
			</view>
			<view v-if="navigationIndex == 0">
				<product-list :list="yourLikelist"></product-list>
			</view>
			<view v-if="navigationIndex == 1">
				<product-list :list="hotGoodslist"></product-list>
			</view>
			<view v-if="navigationIndex == 2">
				<product-list :list="newGoodslist"></product-list>
			</view>
			<view v-if="navigationIndex == 3">
				<product-list :list="recommendGoodslist"></product-list>
			</view>
		</template>
		<!--大分类的商品列表-->
		<template v-if="categoryIndex > 0">
		  <!--这里是占位-->
		  <view class="mt-2"></view>
		  <!--大分类的二级分类，跳转到二级分类列表-->

		  <view class="mt-2" style="margin-top: 258rpx;">
		    <!--这里显示大分类列表-->
		    <product-list :list="indexCategoryGoodsList"></product-list>
		  </view>
		</template>
		
	</view>
</template>

<script>
import {
	getCategoryIndex,
	getNewGoods,
	getBanner,
	getHotGoods,
	recommendGoods,
	getLikeGoodsUrl,
	getCategory,
	getCategoryList as getCategoryListUrl,
	getCartListUrl,
	getSystemConfigUrl,
	getSeckillIndexUrl,
	getConfigUrl
} from '@/api/index';
import productList from '@/components/common/product-list'; //商品列表公共组件
import commonSwiper from '@/components/common/common-swiper/common-swiper';

export default {
	components: {
		productList,
		commonSwiper
	},
	data() {
		return {
			headerbackground: '#EC2D37',
			statusBarheight: '',
			headerBgHeight: '',
			//如果在微信小程序登陆的显示效果
			// #ifdef MP-WEIXIN
			appPussWidth: '',
			watchButtonWidth: '',
			// #endif
			categoryIndex: 0,
			scrollInto: '',
			navigationIndex:0,
			navigationList:this.$Management.navigationList,
			swiperBanner:this.$Management.swiperBanner,
			scrollIntoTime: '',
			categoryHeaderlist: [],
			categoryindexlist: [],
			headerBanner: [],
			seckillTime: this.$json.seckillTime,
			nopictures: this.$Management.nopictures,
			indexCategory:this.$Management.indexCategory,
			newGoodslist: [],
			yourLikelist: [],
			recommendGoodslist: [],
			hotGoodslist: [],
			likeGoodsIdList: [],
			// 保存顶部菜单下面所有的二级菜单
			topMenuAllCategoryList: [],
			// 顶部菜单选中状态下的二级菜单
			otherCategoryMenuList: [],
			indexCategoryGoodsList: [],
			otherMenuGoodsHttpObj: {
				categoryId: '',
				pageSize: 10,
				page: 0
			},
			loadingStatus: true,
			topInfoStatus: false,
			indexSeckillInfo: {
				list: []
			},
			indexSeckillTime: {
				hou: 0,
				min: 0,
				sec: 0
			},
			testHour: 0,
			testMinute: 0,
			testSecond: 0,
			start: false
		};
	},
	onLoad() {
		this.initData();
	},
	// 上划加载
	onReachBottom() {
		this.onReachBottomHandle();
	},
	// 页面往下滚动事件
	onPageScroll(res) {
		const scrollTop = res.scrollTop;
		if (scrollTop >= 100) {
			this.topInfoStatus = true;
		} else {
			this.topInfoStatus = false;
		}
	},
	//获取屏幕信息
	created() {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif

		uni.getSystemInfo({
			success: res => {
				this.width = obj.left || res.windowWidth;
				this.statusBarheight = res.statusBarHeight + 5; //获取顶部状态栏高度+3个像素

				//微信右上角胶囊按纽占比
				// #ifdef MP-WEIXIN
				this.watchButtonWidth = ((obj.width + 10) / res.windowWidth) * 100;
				this.appPussWidth = 100 - this.watchButtonWidth;
				// #endif
			}
		});
	},
	mounted() {
		setTimeout(() => {
			this.testHour = 1
			this.testMinute = 1
			this.testSecond = 0
			this.start = true
		}, 3000)
		setTimeout(() => {
			this.start = false
		}, 10000)
	},
	filters:{
		priceFilters(){
			
		}
	},
	methods: {
		async initData() {
			await this.getCategoryIndexlist();
			await this.getNewGoodslist();
			await this.getHeaderBanner();
			await this.getYourLike();
			await this.getRecommendGoods();
			await this.hotGoods();
			await this.getTopCategoryList();
			await this.getAPPConfig();
			//await this.getSeckillIndex();
			// 异步延迟加载
			setTimeout(() => {
				this.loadingStatus = false;
			}, 100);
		},
		// 首页秒杀商品
		getSeckillIndex() {
			let httpObj = { page: 1, pageSize: 8 };
			this.$R.get(getSeckillIndexUrl, httpObj).then(res => {
				this.indexSeckillInfo = res.data;
				console.log(this.indexSeckillInfo);
				if (this.indexSeckillInfo.list.length <= 0) {
					return false;
				}
				// 获取当前时间
				let date1 = new Date();
				// 去掉时间戳的毫秒
				let nowTime = Number(String(date1.getTime()).substring(0, 10));
				console.log(nowTime);
				// 计算当前时间和秒杀活动的剩余时间
				let surplusTime = this.indexSeckillInfo.endAt - nowTime;
				if (surplusTime > 0) {
					this.indexSeckillTime.hou =
						parseInt((surplusTime % (60 * 60 * 24)) / 3600) < 10
							? '0' + parseInt((surplusTime % (60 * 60 * 24)) / 3600)
							: parseInt((surplusTime % (60 * 60 * 24)) / 3600);
					this.indexSeckillTime.min =
						parseInt(((surplusTime % (60 * 60 * 24)) % 3600) / 60) < 10
							? '0' + parseInt(((surplusTime % (60 * 60 * 24)) % 3600) / 60)
							: parseInt(((surplusTime % (60 * 60 * 24)) % 3600) / 60);
					this.indexSeckillTime.sec =
						parseInt(((surplusTime % (60 * 60 * 24)) % 3600) % 60) < 10
							? '0' + parseInt(((surplusTime % (60 * 60 * 24)) % 3600) % 60)
							: parseInt(((surplusTime % (60 * 60 * 24)) % 3600) % 60);
				}
				let timer = setInterval(() => {
					--this.indexSeckillTime.sec;
					if (this.indexSeckillTime.sec < 0) {
						this.indexSeckillTime.sec = 59;
						--this.indexSeckillTime.min;
						if (this.indexSeckillTime.min < 0) {
							this.indexSeckillTime.min = 59;
							--this.indexSeckillTime.hou;
							if (this.indexSeckillTime.hou < 0) {
								// 如果秒杀结束，清除倒计时，重新获取秒杀接口
								clearInterval(timer);
								this.getSeckillIndex();
							}
						}
					}
				}, 1000);

				console.log(this.indexSeckillTime);
			});
		},
		//获取banner
		getHeaderBanner() {
			this.$R.get(getBanner).then(res => {
				this.headerBanner = res.data;
			});
		},
		//轮播图背景颜色改变
		changeSwiper(e) {
			const index = e.detail.current;
			const headerBanner = this.headerBanner;
			this.headerbackground = headerBanner[index].color;
			
		},
		cliickSeckillTime(index) {
			if (this.seckillTimeIndex === index) {
				return;
			}
			this.seckillTimeIndex = index;
			this.scrollIntoTime = 'time' + index;
		},
		// 顶部菜单点击事件
		clickCategory(index) {
			if (this.categoryIndex === index) {
				return;
			}
			this.categoryIndex = index;
			this.scrollInto = 'tab' + index;
			if (this.categoryIndex != 0) {
				// 因为包含首页，所以要index-1才是正确的
				this.otherCategoryMenuList = this.topMenuAllCategoryList[index - 1].children;
				this.otherMenuGoodsHttpObj.categoryId = this.topMenuAllCategoryList[index - 1].id;
				this.indexCategoryGoodsList = [];
				this.otherMenuGoodsHttpObj.page = 0;
				this.getOtherMenuGoodsList();
			}
		},
		getCategoryIndexlist() {
			this.$R.get(getCategoryIndex).then(res => {
				this.categoryindexlist = res.data;
				console.log(this.categoryindexlist);
				this.categoryHeaderlist = [{ id: 0, cname: '首页' }, ...this.categoryindexlist];
			});
		},
		getNewGoodslist() {
			this.$R.get(getNewGoods).then(res => {
				this.newGoodslist = res.data.list;
				
			});
		},
		// 触底事件
		onReachBottomHandle() {
			// 如果是在首页菜单下面触底
			if (this.categoryIndex == 0) {
				this.getYourLike();
			} else {
				this.getOtherMenuGoodsList();
			}
		},
		//获取猜您喜欢
		async getYourLike() {
			await this.$R.post(getLikeGoodsUrl + '?ids=[' + this.likeGoodsIdList + ']').then(res => {
				// 没有数据，给个提示
				if (res.data.length <= 0) {
					return;
				}
				if (this.yourLikelist.length == 0) {
					this.yourLikelist = [...res.data];
				} else {
					this.yourLikelist = [...this.yourLikelist, ...res.data];
				}
				this.likeGoodsIdList = [];
				this.yourLikelist.forEach(item => {
					this.likeGoodsIdList.push(item.id);
				});
			});
		},
		// 获取一级商品下面的商品
		getOtherMenuGoodsList() {
			this.otherMenuGoodsHttpObj.page++;
			this.$R.get(getCategoryListUrl, this.otherMenuGoodsHttpObj).then(res => {
				// 没有数据，给个提示
				if (res.data.list.length <= 0) {
					return uni.showToast({
						title: '已经到触碰到我的底线啦',
						icon: 'none',
						duration: 3000
					});
				}
				if (this.indexCategoryGoodsList.length == 0) {
					this.indexCategoryGoodsList = [...res.data.list];
				} else {
					this.indexCategoryGoodsList = [...this.indexCategoryGoodsList, ...res.data.list];
				}
			});
		},
		// 获取右边
		hotGoods() {
			this.$R.get(getHotGoods).then(res => {
				this.hotGoodslist = res.data.list;
			});
		},
		getRecommendGoods() {
			this.$R.get(recommendGoods).then(res => {
				this.recommendGoodslist = res.data.list;
			});
		},
		// 获取所有分类，供顶部菜单点击时切换
		getTopCategoryList() {
			this.$R.get(getCategory).then(res => {
				this.topMenuAllCategoryList = res.data;
			});
		},
		tapNavigation(index){
			this.navigationIndex = index
		},
		// 获取基本信息配置
		getAPPConfig() {
			this.$R.get(getConfigUrl).then(res => {
				this.$store.commit('setAppConfigMutations', res.data);
			});
		},
		//微信跳转到搜索页面
		toSearch() {
			uni.navigateTo({
				url: '/pages/index/search/search'
			});
		},
		toLogin() {
			uni.navigateTo({
				url: '/pages/public/login'
			});
		},
		toProductList(categoryId) {
			uni.navigateTo({
				url: '/pages/product/list?type=category&id=' + categoryId
			});
		},
		// 跳转到秒杀商品详情页
		toSeckillProduct(productInfo) {
			uni.navigateTo({
				url: `/pages/product/product?productId=${productInfo.id}&pageStatus=seckill&activeId=${productInfo.activityId}&productStatus=1`
			});
		},

		toNewProduct() {
			uni.navigateTo({
				url: '/pages/product/newproducts'
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		toProduct(productId) {
			uni.navigateTo({
				url: '/pages/product/product?productId=' + productId
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $uni-bg-color-grey;
}
.header-index {
	width: 750rpx;
	height: 238rpx;
	.header-img {
		width: 750rpx;
		height: 238rpx;
		position: absolute;
	}
	.header-nav {
		position: relative;
		z-index: 1;
		.nav-shop-info {
			.nav-shop-search{
				height: 57rpx;
				border-radius: 29rpx;
				background-color: rgba(255,255,255,.3);
			}
			.icon-fenlei1{
				font-size: 55rpx;
			}
		}
	}
	
	.active .category-name {
	  border-bottom: 3rpx solid #fff;
	}
}
.shop-service{
	.iconfont{
		font-size: 26rpx;
		color: #828282;
	}
}
.indexCategory-box{
	width: 650rpx;
	margin-left: 50rpx;
	margin-right: 50rpx;
	.category-item{
		.category-img{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
		.category-text{
			color: #333333;
		}
	}
}

.seckill-box{
	.seckill-title{
		.iconfont{
			font-size: 23rpx;
		}
	}
	.seckill-price-box{
		width: 136rpx;
		height: 32rpx;
		border: 1rpx solid red;
		border-radius: 8rpx;
		.seckill-price{
			width: 68rpx;
			height: 32rpx;
			background-color: red;
			border-radius: 8rpx 0 0 8rpx;
		}
		.seckill-butie{
			width: 68rpx;
			height: 32rpx;
			color: red;
		}
	}
	
}
.navigation{
	.navigation-title{
		border-bottom: 5rpx solid $uni-bg-color-grey;
	}
	.active .navigation-name{
		height: 40rpx;
		font-size: 32rpx;
		font-weight: 900;
	}
	.active .navigation-title{
		color: $main-color;
		border-bottom: 5rpx solid $main-color;
		 transition: all 1.5s;
	}
}

</style>
